<template>
  <div>
    <el-row>
      <el-col :span="10">
        <div class="showThisMonth">
          <div class="title">本月汇总统计</div>
          <div class="msg">
            <span>本月订单额：</span>
            <i>{{msg.totalUserCount}}</i>
            <em>人</em>
          </div>
          <div class="msg">
            <span>本月营收额：</span>
            <i>{{msg.totalMoneyCount}}</i>
            <em>元</em>
          </div>
          <div class="msg">
            <span>本月用户数：</span>
            <i>{{msg.totalUserCount}}</i>
            <em>人</em>
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="showThisMonth">
          <div class="title">本月出行统计</div>
          <div class="msg">
            <span>代派送数：</span>
            <i>{{msg.totalOrderWait}}</i>
          </div>
          <div class="msg">
            <span>空闲车辆：</span>
            <i>{{msg.carRun}}</i>
          </div>
          <div class="msg">
            <span>已变更数：</span>
            <i>{{msg.totalOrderUpdate}}</i>
          </div>
          <div class="msg">
            <span>已取消数：</span>
            <i>{{msg.totalOrderCount}}</i>
          </div>
          <div class="msg">
            <span>暂停车辆：</span>
            <i>{{msg.carDelete}}</i>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from '@/utils/request'
// import { Message } from 'element-ui'
export default {
  data () {
    return {
      msg: {}
    }
  },
  created () {
    request({
      url: '/index/getData',
      method: 'get'
    }).then((res) => {
      if (res.code === '00000000') {
        this.msg = res.data
      }
    })
  }
}
</script>

<style lang='less'>
i, em {
  font-style: normal;
}
.topBox {
  width: 70%;
  color: #ffffff;
  background-color: #007aff;
  padding: 5px 5px 10px 10px;
  margin-left: 50px;
  p {
    font-size: 18px;
    text-align: right;
  }
  h2 {
    text-align: right;
    i {
      font-size: 16px;
    }
  }
}
.bottomBox {
  color: #ffffff;
  background-color: #007aff;
  padding: 15px 5px 10px 10px;
  margin: 50px;
  height: 400px;
}
.showThisMonth {
  padding: 15px 5px 10px 10px;
  width: 500px;
  overflow: hidden;
  .title {
    height: 30px;
    line-height: 30px;
    font-size: 24px;
    border-left: 5px solid #ec8484;
    padding-left: 15px;
    margin-left: 50px;
  }
  .msg {
    padding-left: 50px;
    margin-top: 15px;
    font-weight: 700;
    span {
      color: #999;
    }
    i {
      color: red;
    }
  }

}
</style>
